/*
 * @Author: hongbin
 * @Date: 2022-11-03 22:08:34
 * @LastEditors: hongbin
 * @LastEditTime: 2022-11-20 22:23:30
 * @Description:登陆表单
 */
import { FC, useCallback, useState } from "react";
import styled, { css } from "styled-components";
import { post } from "../../api";
import { useAuth } from "../../context/AuthProvide";
import { flexCenter, FlexDiv } from "../../styled";
import { closePlaneRef } from "../HeadPortrait";

interface InputProp {
    title: string;
    value: string | number;
    setValue: any;
    type?: string;
    inputErr?: boolean;
    errorInfo?: string;
    onBlur?: () => void;
}

export const Input: FC<InputProp> = ({ title, value, setValue, type, onBlur, inputErr, errorInfo }) => {
    return (
        <InputWrap inputErr={inputErr}>
            <span>{title}</span>
            <input onBlur={onBlur} type={type || "text"} value={value} onChange={(e) => setValue(e.target.value)} />
            {inputErr ? <span style={{ color: "red" }}>{errorInfo || "有误"}</span> : null}
        </InputWrap>
    );
};

interface IProps {
    toggleRegister: () => void;
}

const Login: FC<IProps> = ({ toggleRegister }) => {
    const { recordUserInformation } = useAuth();
    const [errorMsg, setErrorMsg] = useState("");
    const [info, setInfo] = useState({
        name: "",
        password: "",
        remember: false,
    });

    const setValue = useCallback(
        (key: keyof typeof info) => (val: string | boolean) => {
            setInfo((prev) => ({ ...prev, [key]: val }));
        },
        []
    );

    const login = async () => {
        const { data, code } = await post("/Auth/login", info);
        if (code) {
            setErrorMsg(data.msg);
        } else {
            closePlaneRef.current?.setShow(false);
            recordUserInformation(data);
        }
    };

    return (
        <Container>
            <Input value={info.name} title="姓名" setValue={setValue("name")} />
            <Input value={info.password} title="密码" type="password" setValue={setValue("password")} />
            {/* <FlexDiv
                css={css`
                    span {
                        color: #fff;
                        font-size: 1vw;
                    }
                `}
            >
                <input checked={info.remember} onChange={() => setValue("remember")(!info.remember)} type="checkbox" />
                <span>记住我</span>
            </FlexDiv> */}
            <ErrorMsg>{errorMsg}</ErrorMsg>
            <Button onClick={login} bg="#017101" color="#fff">
                登陆
            </Button>
            <Button onClick={toggleRegister} bg="transparent" color="#2c068d" fontSize="0.7em">
                我没有账号
            </Button>
        </Container>
    );
};

export default Login;

export const ErrorMsg = styled.span`
    color: #f00;
    /* font-size: 0.8em; */
    font-size: 1vw;
`;

export const Button = styled.button<{ bg?: string; color?: string; fontSize?: string }>`
    width: 100%;
    border: none;
    border-radius: 0.3vw;
    padding: 0.5vmin 1vmin;
    margin-top: 1vh;
    background: ${(props) => props.bg};
    color: ${(props) => props.color};
    font-size: ${(props) => props.fontSize};
    cursor: pointer;
    transition-property: transform;
    transition-duration: 0.3s;
    :hover {
        transform: translateY(-1px);
    }
`;

const Container = styled.div`
    display: flex;
    flex-direction: column;
    ${flexCenter};
    width: 100%;
    padding: 1vw;
`;

const InputWrap = styled.div<{ inputErr?: boolean }>`
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 1vh;
    span {
        font-size: 1.2vw;
        margin-bottom: 1vh;
        color: #ffffff;
    }
    input {
        border: 1px solid transparent;
        background: #ffffff44;
        border-radius: 0.2vw;
        padding: 0.4vh 1vw;
        outline: none;
        color: #ffffff;
        transition: border 0.2s linear;
        ${({ inputErr }) =>
            inputErr &&
            css`
                border: 1px solid red;
            `}
    }
`;
